<template>
  <div class="order-detail-box">
    <s-header :name="'订单详情'" @callback="close"></s-header>

    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{ orderDetail.statusName }}</span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{ orderDetail.orderId }}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{ timestampToTime(orderDetail.createTime) }}</span>
      </div>

      <van-button v-if="orderDetail.status === 0" style="margin-bottom: 10px" color="#1baeae" block
                  @click="handleChangeOrderStatus(1)">确认付款
      </van-button>
      <van-button v-if="orderDetail.status === 1" style="margin-bottom: 10px" color="#1baeae" block
                  @click="handleChangeOrderStatus(2)">确认发货
      </van-button>
      <van-button v-if="orderDetail.status === 2" style="margin-bottom: 10px" color="#1baeae" block
                  @click="handleChangeOrderStatus(3)">确认收货
      </van-button>
      <van-button v-if="orderDetail.status === 3" style="margin-bottom: 10px" color="#1baeae" block
                  @click="handleChangeOrderStatus(4)">确认订单完成
      </van-button>
      <van-button v-if="!(orderDetail.status < 0 || orderDetail.status === 5)" block
                  @click="handleChangeOrderStatus(5)">取消订单
      </van-button>
    </div>


    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>¥ {{ orderDetail.finalPrice }}</span>
      </div>
    </div>

    <van-card
        :key="good.goodId"
        :price="good.sellingPrice"
        :desc="good.introduction"
        :title="good.name"
        :thumb="good.pictures"
    >
    </van-card>


  </div>
</template>

<script>
import {reactive, toRefs, onMounted} from 'vue'
import sHeader from '@/components/SimpleHeader'
import {getOrderDetail, updateOrder} from '@/service/order'
import {Dialog} from 'vant'
import {useRoute} from 'vue-router'
import {getGoodByIdWithHeadImg} from "@/service/good";
import router from "@/router";

export default {
  name: 'OrderDetail',
  components: {
    sHeader
  },
  setup() {
    const route = useRoute()
    const state = reactive({
      orderDetail: {},
      good: ''
    })

    onMounted(async () => {
      const {id} = route.query
      const {data} = await getOrderDetail({orderId: id})
      switch (data.status) {
        case 0:
          data.statusName = "已付款"
          break;
        case 1:
          data.statusName = "已付款"
          break;
        case 2:
          data.statusName = "已发货"
          break;
        case 3:
          data.statusName = "已收货"
          break;
        case 4:
          data.statusName = "已完成"
          break;
        case 5:
          data.statusName = "已取消"
          break;
      }
      state.orderDetail = data
      const goodId = data.goodId
      const {good} = await getGoodByIdWithHeadImg({goodId: goodId})
      state.good = good
    })


    const handleChangeOrderStatus = (status) => {
      Dialog.confirm({
        title: '确认修改订单状态？',
      }).then(() => {
        updateOrder({orderId: state.orderDetail.orderId, status: status})
        router.back()
      }).catch(() => {
        // on cancel
      });
    }

    const close = () => {
      Dialog.close()
    }

    const timestampToTime = (timestamp) => {
      timestamp = timestamp ? timestamp : null;
      let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    }

    return {
      ...toRefs(state),
      handleChangeOrderStatus,
      close,
      timestampToTime
    }

  }
}
</script>

<style lang="less" scoped>
.order-detail-box {
  background: #f7f7f7;

  .order-status {
    background: #fff;
    padding: 20px;
    font-size: 15px;

    .status-item {
      margin-bottom: 10px;

      label {
        color: #999;
      }

      span {

      }
    }
  }

  .order-price {
    background: #fff;
    margin: 20px 0;
    padding: 20px;
    font-size: 15px;

    .price-item {
      margin-bottom: 10px;

      label {
        color: #999;
      }

      span {

      }
    }
  }

  .van-card {
    margin-top: 0;
  }

  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
